<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>1F钢架E化方案 - 后台管理 - 角色列表</title>
<%@include file="/WEB-INF/common/css.jsp"%>
<style>
  	#machineList{
  		background: #5bc184;
  		width: 90%;
  		padding: 14px;
  		padding-bottom: 14px;
  		margin: 0 20px;
  		display: block;
  		box-shadow: 0 4px 15px #333;
  	}
  	@-webkit-keyframes Glow {
	    from {
	        text-shadow: 0 0 10px #fff,
	                     0 0 20px #fff,
	                     0 0 30px #fff,
	                     0 0 40px #00a67c,
	                     0 0 70px #00a67c,
	                     0 0 80px #00a67c,
	                     0 0 100px #00a67c,
	                     0 0 150px #00a67c;
	    }
	    to {
	        text-shadow: 0 0 5px #fff,
	                     0 0 10px #fff,
	                     0 0 15px #fff,
	                     0 0 20px #00a67c,
	                     0 0 35px #00a67c,
	                     0 0 40px #00a67c,
	                     0 0 50px #00a67c,
	                     0 0 75px #00a67c;
	    }
	}
  	#machineList a{
  		color: #fff;
    	font-size: 17px;
    	margin: 10px;
    	transition: all 1.5s ease;
  	}
  	#machineList a:hover{
  		box-reflect: below;
  		animation: Glow 1.5s ease infinite alternate;
  	}
  	#listshow tbody tr:hover{
  		background: #fff;
  	}
  </style>
<%@include file="/WEB-INF/common/topjs.jsp"%>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<%@include file="/WEB-INF/common/admin/header.jsp"%>
		<%@include file="/WEB-INF/common/admin/menu.jsp"%>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<br><br>
	    	<span id="machineList">
	    	
			</span>
			<div style="padding: 15px;">
				<h3 class="layui-bg-cyan" style="height: 50px;line-height: 50px;padding-left: 5px">产出数据列表</h3>
				<hr>
				<div>
					<div class="layui-row">
						
					</div>
					<table class="layui-table" id="listshow">
						
					</table>
					<div id="pager"></div>
				</div>
			</div>
		</div>

		<%@include file="/WEB-INF/common/admin/footer.jsp"%>

	</div>


	<%@include file="/WEB-INF/common/bottomjs.jsp"%>
	<script>
	
	function showData(id){
		machineId = id;
		$("#listshow tbody").html("");
		$.ajax({
			url:"${base}/api/output/item/list.api",
	    	type: "post",
	    	data: {machineId, id},
	    	headers: Apicheck.getHeaders(),
	    	success: function(result){
	    		var xtable = new XTable();
	    		xtable.setOption({
	    			type: XTable.LEFT_CASCADE,
	    			head:[{name:"机种"},{name:"站别"},{name:"项目"},{name:"Target"},{name:"数据操作人员"}
	    				,{name:"Targe更改人员"},{name:"班别"},{name:"站别排序"},{name:"项目排序"}],
	    			stopShowKey: "name",
	    			buttons:[],
	    			data: [result.data]
	    		});
	    		xtable.show("listshow");
	    	}
		});
	}
	var machineId = 1;
	$(function(){
		showData(machineId);
		
		$.ajax({
			url:"${base}/api/output/item/findMachines.api",
			type: "post",
			headers: Apicheck.getHeaders(),
			success: function(result){
				var html = "";
				for(var i = 0; i < result.data.length; i ++){
					html += "<a href='#' onclick='showData("+result.data[i].id+")'>"+result.data[i].name+"</a>";
				}
				$("#machineList").html(html);
				var element = layui.element;
			}
		});
	})
</script>
</body>
</html>